扩展

const { CleanWebpackPlugin } = require("clean-webpack-plugin");  // 打包前清空 dist 目录
const HtmlWebpackPlugin = require("html-webpack-plugin");  // 生成 html 文件，并将打包的 js 文件引入
const CopyWebpackPlugin = require("copy-webpack-plugin");  // 拷贝静态资源
const webpack = require("webpack");  // 拷贝静态资源

module.exports = {
    entry: {
        index: "./src/js/index.js",
        util: "./src/js/util.js"
    },
    output: {
        filename: "js/[name][hash:5].js",
        publicPath: "./",  // 路径拼接
    },
    module: {
        rules: [
            {
                test: /\.(png)|(jpg)|(gif)$/,
                use: [{
                    loader: "url-loader",  // 文件导出
                    options: {
                        limit: 10 * 1024,
                        name: "img/[name][hash:5].[ext]"
                    }
                }]
            },
            // {
            //     test: /\.(png)|(jpg)|(gif)$/,
            //     use: [{
            //         loader: "file-loader",  // 文件导出
            //         options: {
            //             name: "img/[name][hash:5].[ext]"
            //         }
            //     }]
            // },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./src/index.html",  // 打包HTML文件
            filename: "index.html",  // 打包后的文件名
            chunks: ["index"]  // 指定要打包的js文件（指向 entry 的 key 值）
        }),
        new CopyWebpackPlugin([
            { from: "./src/img", to: "./img" }
        ]),
        new webpack.DefinePlugin({  // 存放常量
            URL: "https://www.baidu.com"
        }),
        new webpack.BannerPlugin({  // 添加注释
            banner: `版权所有：
                作者：`
        }),
        new webpack.ProvidePlugin({  // 导入模块（模块用的较为频繁）
            $: 'jquery'
        })
    ],
    
}